<template>
    <div class="singer-home">
        <van-nav-bar
            title="歌手详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <img :src="singer.singer_pic" alt="">
        <van-tabs v-model="active">
            <van-tab title="百科">
                <SingerIntro :singerId="id"/>
            </van-tab>
            <van-tab title="歌曲">
                <SingerSong :singerId="id"/>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
//引入两个标签页对应的子组件
import SingerIntro from "./components/SingerIntro.vue"
import SingerSong from "./components/SingerSong.vue"

export default {
    data(){
        return{
            //标签页的当前激活页，是标签页tab的默认用法
            active: 0,
            //从HomeSinger.vue中跳转过来，通过路由获取到id，也就是歌手的id
            id: this.$route.params.id,
            singer:{}
        }
    },
    created(){
        this.singer = this.$store.state.singer
    
    },
    methods:{
        onClickLeft(){
            //如果历史记录大于1，那么返回到上一层，如果历史记录小于等于1，返回到根路由
            window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
        }
    },
    components:{
        SingerIntro,
        SingerSong
    }
}
</script>
<style scoped>

</style>